<template>
  <div class="component-base-info">
    <div class="audit-status">
      <div class="audit-item">
        <span class="week">{{ $t('shop.storeStatus') }}：</span>
        <span v-if="dataForm.shopStatus === -1">{{ $t('shop.nonactivated') }}</span>
        <span v-if="dataForm.shopStatus === 0">{{ $t('shop.closed') }}</span>
        <span v-if="dataForm.shopStatus === 1">{{ $t('shop.inOperation') }}</span>
        <span v-if="dataForm.shopStatus === 2">{{ $t('groups.offlineViolation') }}</span>
        <span v-if="dataForm.shopStatus === 3">{{ $t('productComm.platformAudit') }}</span>
      </div>
    </div>
    <!-- 基本信息 -->
    <div class="basic-info-mod">
      <!-- 信息 -->
      <div class="business-info-mod">
        <el-form
          ref="dataFormRef"
          :model="dataForm"
          :rules="rules"
          label-width="120px"
          @submit.prevent
          @keyup.enter="onSubmit()"
        >
          <div class="ci-wrapper">
            <el-form-item
              :label="$t('shop.shopLogo')"
              prop="shopLogo"
            >
              <img-upload
                v-model="dataForm.shopLogo"
                class="upload-logo"
              />
            </el-form-item>
            <el-form-item
              :label="$t('shop.storeName')"
              prop="shopName"
            >
              <p class="txt">
                <el-input
                  v-model="dataForm.shopName"
                  placeholder="请输入20字以内的商家名称"
                  maxlength="20"
                  show-word-limit
                  style="width: 100%"
                />
              </p>
            </el-form-item>
            <el-form-item
              :label="$t('shop.contactTel')"
              prop="tel"
            >
              <p class="txt">
                <el-input
                  v-model="dataForm.tel"
                  placeholder="请输入联系电话"
                  maxlength="11"
                  style="width: 100%"
                  @input="dataForm.tel=dataForm.tel.replace(/[^\d|*]/g,'')"
                />
              </p>
            </el-form-item>
            <el-form-item
              :label="$t('shop.receiveSMSMobile')"
              prop="receiveMobile"
            >
              <p class="txt">
                <el-input
                  v-model="dataForm.receiveMobile"
                  placeholder="请输入接收短信手机号"
                  maxlength="11"
                  style="width: 100%"
                  @input="dataForm.receiveMobile=dataForm.receiveMobile.replace(/[^\d|*]/g,'')"
                />
              </p>
            </el-form-item>
            <el-form-item
              :label="$t('shop.shopDescription')"
              prop="intro"
            >
              <el-input
                v-model="dataForm.intro"
                type="textarea"
                :rows="4"
                class="store-intro"
                maxlength="299"
                placeholder="请输入200字以内店铺简介"
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="footer">
        <div class="foot-box">
          <div
            class="btn"
            @click="onSubmit()"
          >
            {{ $t('shop.submitChanges') }}
          </div>
        </div>
      </div>
    </div>
    <!-- /基本信息 -->
  </div>
</template>

<script setup>
import { isStarMobile } from '@/utils/validate'
import { ElMessage } from 'element-plus'

// eslint-disable-next-line no-unused-vars
const validMobile = (rule, value, callback) => {
  if (!value) {
    callback(new Error($t('shop.mobileEmptyTips')))
  } else if (!isStarMobile(value)) {
    callback(new Error($t('shop.mobileErrorTips')))
  } else {
    callback()
  }
}
// eslint-disable-next-line no-unused-vars
const validPhone = (rule, value, callback) => {
  value = value.trim()
  if (!value) {
    callback(new Error($t('shop.phoneEmptyTips')))
  } else if (!isStarMobile(value)) {
    callback(new Error($t('shop.phoneErrorTips')))
  } else {
    callback()
  }
}
const rules = {
  tel: [
    {
      required: true,
      trigger: 'blur',
      validator: validPhone
    }
  ],
  receiveMobile: [
    {
      required: true,
      trigger: 'blur',
      validator: validMobile
    }
  ],
  shopName: [
    {
      required: true,
      trigger: 'blur',
      message: $t('prodList.inputShopName')
    }
  ],
  shopLogo: [
    {
      required: true,
      message: $t('shop.shopLogoNotNullTips')
    }
  ]
}

const visible = ref(false)
const show = ref(false)
const init = () => {
  visible.value = true
  show.value = false
  onGetDataInfo()
}

onMounted(() => {
  init()
})

const dataFormRef = ref(null)
const dataForm = ref({
  shopId: '',
  shopStatus: '',
  shopName: '',
  shopOwner: '',
  mobile: '',
  tel: '',
  intro: '',
  shopLogo: '',
  identityCardFront: '',
  identityCardLater: '',
  businessLicense: '',
  receiveMobile: ''
})
/**
 * 获取店铺详情数据
 */
const onGetDataInfo = () => {
  nextTick(() => {
    dataFormRef.value?.resetFields()
  })
  http({
    url: http.adornUrl('/shop/shopDetail/info'),
    method: 'get',
    params: http.adornParams()
  })
    .then(({ data }) => {
      dataForm.value.shopId = data.shopId
      dataForm.value.shopStatus = data.shopStatus
      dataForm.value.shopName = data.shopName
      dataForm.value.shopOwner = data.shopOwner
      dataForm.value.mobile = data.mobile
      dataForm.value.tel = data.tel
      dataForm.value.receiveMobile = data.receiveMobile
      dataForm.value.intro = data.intro
      dataForm.value.shopLogo = data.shopLogo
      dataForm.value.identityCardFront = data.identityCardFront
      dataForm.value.identityCardLater = data.identityCardLater
      dataForm.value.businessLicense = data.businessLicense
    })
}

const emit = defineEmits(['closeBrowse'])
const isEditAddr = ref(false)
/**
 * 表单提交
 */
const onSubmit = () => {
  if (isEditAddr.value) {
    ElMessage.info($t('admin.mapPosi'))
    return
  }
  dataFormRef.value.validate(valid => {
    if (valid) {
      http({
        url: http.adornUrl('/shop/shopDetail'),
        method: 'put',
        data: http.adornData({
          shopName: dataForm.value.shopName,
          shopOwner: dataForm.value.shopOwner,
          mobile: dataForm.value.mobile,
          receiveMobile: dataForm.value.receiveMobile,
          tel: dataForm.value.tel.trim(),
          intro: dataForm.value.intro,
          shopLogo: dataForm.value.shopLogo,
          identityCardFront: dataForm.value.identityCardFront,
          identityCardLater: dataForm.value.identityCardLater,
          businessLicense: dataForm.value.businessLicense
        })
      })
        .then(() => {
          ElMessage({
            message: $t('publics.operation'),
            type: 'success',
            duration: 1500,
            onClose: () => {
              visible.value = false
            }
          })
          emit('closeBrowse')
        })
    }
  })
}
</script>

<style lang="scss" scoped>
@use "index";
</style>
